<template>
    <div>
        <el-button
            type="primary"
            size="small"
            icon="el-icon-circle-plus-outline"
            @click="showListting()"
        >{{$t('m.button.addRecord')}}</el-button>
        <el-table
            ref="table"
            :data="tableData"
            :header-cell-style="getRowClass"
            v-loading="loading"
            border
        >
            <el-table-column prop="sellerName" :label="$t('m.label.account')"></el-table-column>
            <el-table-column prop="countryName" :label="$t('m.label.country')"></el-table-column>
            <el-table-column prop="productModelNumber" :label="$t('m.label.productModelNumber')"></el-table-column>
            <el-table-column prop="productListingEventDescription" :label="$t('m.label.event')"></el-table-column>
            <el-table-column prop="productListingEventTime" :label="$t('m.label.time')"></el-table-column>
            <el-table-column
                prop="productListingEventProcessingRecord"
                :label="$t('m.label.processingRecords')"
            ></el-table-column>
            <el-table-column prop="productListingEventRecordUser" :label="$t('m.label.recorder')"></el-table-column>
            <el-table-column prop="uTime" :label="$t('m.label.updateTime')"></el-table-column>
            <el-table-column :label="$t('m.label.operating')" width="80">
                <template slot-scope="scope">
                    <el-button size="mini" @click="showListting(scope.row)">{{$t('m.button.edit')}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <scrollTable ref="scrollTable"></scrollTable>
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="350px">
            <el-form ref="form" :model="formData" :rules="rules" label-width="90px">
                <el-form-item
                    :label="$t('m.label.productModelNumber')+':'"
                >{{basicInfo.productModelNumber}}</el-form-item>
                <el-form-item prop="sellerId" :label="$t('m.label.account')+':'">
                    <account :form="formData" formId="sellerId" addSize="mini" size="small"></account>
                </el-form-item>
                <el-form-item prop="countryId" :label="$t('m.label.country')+':'">
                    <country :form="formData" formId="countryId" addSize="mini" size="small"></country>
                </el-form-item>
                <el-form-item prop="productListingEventTime" :label="$t('m.label.time')+':'">
                    <el-date-picker
                        v-model="formData.productListingEventTime"
                        type="datetime"
                        :placeholder="$t('m.placeholder.selectTime')"
                        default-time="12:00:00"
                        size="small"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item
                    prop="productListingEventDescription"
                    :label="$t('m.label.event')+':'"
                >
                    <el-input v-model="formData.productListingEventDescription" size="small"></el-input>
                </el-form-item>
                <el-form-item
                    prop="productListingEventProcessingRecord"
                    :label="$t('m.label.processingRecords')+':'"
                >
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 3, maxRows: 6}"
                        v-model="formData.productListingEventProcessingRecord"
                        size="small"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
                <el-button
                    type="primary"
                    @click="onSubmit('form')"
                    size="small"
                    :disabled="loadingSubmit"
                >确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template> 
<script>
const ERR_OK = 200;
import scrollTable from "components/scroll/scroll-table.vue";
import account from "components/searchfor/account";
import country from "components/searchfor/country";
export default {
    props: {
        basicInfo: Object
    },
    data() {
        return {
            loading: true,
            tableData: [],
            dialogTitle: "",
            dialogFormVisible: false,
            formData: {
                productListingEventRecordUser: "当前用户",
                productId: this.basicInfo.productId
            },
            loadingSubmit: false,
            rules: {
                countryId: [
                    {
                        required: true,
                        message: this.$t("m.placeholder.selectCountry"),
                        trigger: "change"
                    }
                ],
                sellerId: [
                    {
                        required: true,
                        message: this.$t("m.placeholder.selectCountry"),
                        trigger: "change"
                    }
                ],
                productListingEventTime: [
                    {
                        type: "date",
                        required: true,
                        message: "请选择日期",
                        trigger: "change"
                    }
                ],
                productListingEventDescription: [
                    {
                        required: true,
                        message: "请输入事件",
                        trigger: "blur"
                    }
                ],
                productListingEventProcessingRecord: [
                    {
                        required: true,
                        message: "请输入处理记录",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            this.loading = true;
            this.$ajax
                .get(
                    this.GLOBAL.productService +
                        "/productListingEvent/findByProductId/" +
                        this.basicInfo.productId
                )
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.tableData = res.data.data;
                    }
                    this.loading = false;
                    this.$refs.scrollTable.scrollShow(this.$refs.table);
                });
        },
        showListting(val) {
            if (val) {
                this.dialogTitle = "编辑记录";
                this.formData = JSON.parse(JSON.stringify(val));
            } else {
                this.dialogTitle = "添加记录";
                 this.$refs["form"].resetFields();
            }
            this.dialogFormVisible = true;
        },
        onSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.loadingSubmit = true;
                    if (this.dialogTitle === "添加记录") {
                        this.addListting();
                    } else {
                        this.editListting();
                    }
                } else {
                    return false;
                }
            });
        },
        addListting() {
            this.$ajax({
                method: "post",
                url: this.GLOBAL.productService + "/productListingEvent/add",
                data: this.formData
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.getData();
                    this.$message.success("添加记录成功");
                    this.dialogFormVisible = false;
                } else {
                    this.$message.error(res.data.msg);
                }
                this.loadingSubmit = false;
            });
        },
        editListting() {
            this.$ajax({
                method: "put",
                url:
                    this.GLOBAL.productService +
                    "/productListingEvent/update/" +
                    this.formData.productListingEventId,
                data: this.formData
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.getData();
                    this.$message.success("编辑记录成功");
                    this.dialogFormVisible = false;
                } else {
                    this.$message.error(res.data.msg);
                }
                this.loadingSubmit = false;
            });
        },
        // 标题背景颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        }
    },
    components: {
        scrollTable,
        account,
        country
    }
};
</script>
<style lang="stylus" scoped>
.el-table {
    margin-top: 10px;
}

.el-form-item {
    margin-bottom: 15px;

    .el-select {
        width: 100%;
    }
}
</style>